import React , {Component} from "react";
import {Link} from 'react-router-dom';
require('./header.scss');
export default class Header extends Component<any,any> {
    constructor(props:any){
        super(props)
        this.state = {
            url:'/home'
        }
    }
    handleClick = (url:String)=> {
        // console.log('路径·')
        // console.log(url)
        this.setState({
            url
        })
    }
    render():any{
        return (
            <div className="headerPar">
                <div className="headerSon mAuto">
                    <div className="left">
                    <img src={require('~/images/logo.svg')} alt="掘金" />
                        <ul>
                            <li className={this.state.url == '/home'?'active':''}><Link to="/home" onClick={()=>this.handleClick('/home')}>首页</Link></li>
                            <li className={this.state.url == '/feidian'?'active':''}><Link to="/feidian" onClick={()=>this.handleClick('/feidian')}>沸点</Link></li>
                            <li className={this.state.url == '/huati'?'active':''}><Link to="/huati" onClick={()=>this.handleClick('/huati')}>话题</Link></li>
                            <li className={this.state.url == '/xiaoce/1'?'active':''}><Link to="/xiaoce/1" onClick={()=>this.handleClick('/xiaoce/1')}>小册</Link></li>
                            <li className={this.state.url == '/huodong'?'active':''}><Link to="/huodong" onClick={()=>this.handleClick('/huodong')}>活动</Link></li>
                        </ul>
                    </div>  
                    <div className="right">
                     <div className="sech">
                         <input type="text" placeholder="搜索掘金"/>
                         <img src={require('~/images/sech_img.svg')} alt="搜索" className="secImg"/>
                     </div>
                     <img src={require('~/images/clock.png')} alt="消息"  className="msgImg"/>
                     <img src='https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg' alt="头像"  className="avatar"/>
                    </div> 
                </div>
                 
            </div>
        )
    }
}